<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文章列表</title>
    <style type="text/css">
        #table table {
            width: 100%;
            font-size: 14px;
            border: 1px solid #eee
        }

        #table {
            padding: 0 10px;
        }

        table thead th {
            background: #f5f5f5;
            padding: 10px;
            text-align: left;
        }

        table tbody td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
            border-right: 1px solid #eee;
        }

        table tbody td span {
            margin: 0 10px;
            cursor: pointer;
        }

        .delete {
            color: red;
        }

        .edit {
            padding-left: 20px;
            color: #008cd5;
        }

        .add {
            border: 1px solid #eee;
            margin: 10px 0;
            padding: 15px;
            text-align: center;
        }

        input {
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 3px;
            margin-right: 15px;
        }

        button {
            background: #008cd5;
            border: 0;
            padding: 4px 15px;
            border-radius: 3px;
            color: #fff;
        }

        #mask {
            background: rgba(0, 0, 0, .5);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 4;
            display: none;
            top: 0;
            left: 0;
        }

        .mask {
            width: 300px;
            height: 250px;
            background: rgba(255, 255, 255, 1);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 47;

            border-radius: 5px;
        }

        .title {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .title span {
            float: right;
            cursor: pointer;
        }

        .content {
            padding: 10px;
        }

        .content input {
            width: 270px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div id="table">
        <div class="add">
            <input type="text" name="title" value="" placeholder="标题" class="biao" />
            <input type="text" name="user" value="" placeholder="发布人" class="name" />
            <input type="date" name="date" value="" placeholder="发布时间" class="date" />
            <button class="increase">新增</button>
        </div>
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>发布人</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="neirong">
                <!-- 需要在这里输出表格数据 -->

            </tbody>
        </table>
        <div id="mask">
            <div class="mask">
                <div class="title"> 编辑 <span> X </span>
                </div>
                <div class="content">
                    <form action="">
                        <input type="text" name="title" value="" placeholder="标题" class="biao1" />
                        <input type="text" name="user" value="" placeholder="发布人" class="name1" />
                        <input type="date" name="date" value="" placeholder="发布时间" class="date1" />
                        <button class="update">更新</button>
                        <button class="cancel">取消</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var increase, cancel, update, mask, neirong, obj;
        init()

        function init() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.iynn.cn/mock?t=2');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    obj = JSON.parse(xhr.responseText).data
                    // console.log(obj.data);   
                    init1()
                    // localStorage.setItem(obj.data)
                    //把数据存到localStorage
                    localStorage.setItem("data", JSON.stringify(obj));
                    // console.log(JSON.parse(localStorage.data));
                    updateHandler()

                }
            }
        }

        function init1() {
            //获取增加
            increase = document.querySelector(".increase")
            //新增页面得取消按钮
            cancel = document.querySelector(".cancel")
            //更新按钮
            update = document.querySelector(".update")
            //获取新增内容部分DIV
            mask = document.querySelector("#mask")
            //给增加，取消添加点击事件
            cancel.addEventListener("click", cancelHandler);
            increase.addEventListener("click", increaseHandler)


        }


        function updateHandler(e) {
            neirong = document.querySelector(".neirong");
            //渲染页面
            Object.keys(obj).forEach(function (i) {
                var tr = document.createElement("tr")
                neirong.appendChild(tr);
                tr.innerHTML = `
                <td>${obj[i].id}</td>
                <td>${obj[i].title}</td>
                <td>${obj[i].user}</td>
                <td >${obj[i].date}</td>
                <td class="last"></td>
            `

            })
            //创建删除编辑按钮
            var last = document.querySelector(".last");
            var shan = document.createElement("a")
            shan.className = "delete"
            shan.innerHTML = "删除"
            var gai = document.createElement("a")
            gai.className = "edit"
            gai.innerHTML = "编辑"
            last.appendChild(shan)
            last.appendChild(gai)

            shan.addEventListener("click", shanHendler);
            gai.addEventListener("click", gaiHndler);
        }

        function cancelHandler(e) {
            mask.style.display = "none"
        }

        function increaseHandler(e) {
            inputHandler();
        }

        function inputHandler(e) {
            var biao = document.querySelector(".biao")
            // console.log(biao.value);     
            var name = document.querySelector(".name")
            var date = document.querySelector(".date")
            //存储新输入的值
            var xin = {
                title: biao.value,
                user: name.value,
                date: date.value,
                id: Number(obj.length) + 1
            }
            // 把新增的信息添加到缓存中
            obj.push(xin);
            localStorage.setItem("data", JSON.stringify(obj));
            //清除内容部分 重新渲染页面
            neirong.innerHTML = "";
            updateHandler()
        }
        //删除尾部元素
        function shanHendler(e) {
            obj.pop();
            localStorage.setItem("data", JSON.stringify(obj));
            neirong.innerHTML = "";
            updateHandler()
        }
        //编辑页面的更新
        function gaiHndler(e) {
            mask.style.display = "block"
            var biao = document.querySelector(".biao1")
            // console.log(biao01);    
            var name = document.querySelector(".name1")
            var date = document.querySelector(".date1")
            // console.log(biao.value);
            biao.value = obj[0].title;
            name.value = obj[0].user;
            date.value = obj[0].date;
        }
    </script>
</body>

</html>